<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div id="app">
    <div class="container">
      <table class="table table-bordered table-hover">
        <thead>
          <tr>
            <th>编号</th>
            <th>资产名称</th>
            <th>价格</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,idx) in list">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.price}}</td>
            <td><a href="#" @click.prevent="hDel(item.id)">删除</a></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <script src="./vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  <script>
      // 需要json-server的支持，用它启动接口服务器
      // 步骤：
      // 1.引入vue.js
      // 2. 实例化vue对象 
      //    三大件： el,data,methods
      // 3. 实现功能
      //   (1) 循环渲染数据： v-for
      //       用axios去请求接口，获取数据，再渲染。
      //       1)引入axios
      //       2)在一个恰当的时机created去发请求 : 在vue实例创建完成时，去发请求
      //       3）把接口返回的值设置给list
      //   (2) 删除数据：@click,
      //      1）传入id值
      //      2）调用接口去删除
      //      3）删除成功，则要重新请求一次数据
      //   (3) 标注红色 动态的添加样式，只有>100才加。 使用对象来绑定class.
      //   (4) 添加功能
      //     1) 基本输入框结构
      //     2) 点击添加
      //      - 收集用户的输入信息:v-model,补一些必要的修饰符。
      //      - 简单判空
      //      - 添加到list中
      //   (5) 计算总和
      //      补充一个计算属性，在其中对list进行循环，算出总共的price
      //   (6) 筛选功能
      //       在筛选区域的input框中输入关键字，则在下面的list中找出对应的项,其它项应该要隐藏起来
      //      - 给input添加v-model,收集用户需要的关键字
      //      - 定义一个计算属性，根据关键字来在list中进行数据的过滤，找出符合关键字要求的项

      const vm = new Vue({
        el: '#app',
        data: {
          list: [
            // {
            //   "id": 3,
            //   "name": "鞋",
            //   "price": 25.4
            // }
          ]
        },
        methods: {
          // 获取数据的工作，需要反复使用，所以封装成一个函数
          getData() {
            
            // 发请求，获取所有的数据
            axios({
              method: 'get',
              url:'http://localhost:3000/assets'

            }).then(res => {
              // 这里使用箭头函数,所以在函数内部就可以使用外层的this-->vue实例
              // console.dir(res)
              // res是请求成功之后，axios封装一个对象，接口返回的真正的数据在res.data
              console.log(res.data)
              // 把求回来的数据保存在list中
              this.list = res.data

            }).catch(err => {
              console.dir(err)

            })
          },
          
          hDel(id) {
            console.log('你要删除的元素id',id)
            // 调用接口
            axios({
              method:'delete',
              url: 'http://localhost:3000/assets/'+id
            }).then(res => {
              console.log(res)
              // 重新请求一次数据
              this.getData()
            }).catch(err => {
              console.dir(err)
            })
          }
        },
        created () {
          // created是一个特殊的配置项。它有一个额外的名字：生命周期函数 ------ 钩子函数
          // 它的值是一个函数，这个函数在vue实例创建完成之后，就会去执行。
          console.log('vue实例创建完成，去发请求',this)
            
          this.getData()
        }
      })
  //     {
  //   "id": 3,
  //   "name": "鞋",
  //   "price": 25.4
  // },

  </script>
</body>
</html>